<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
  [class.selected]="hero === selectedHero"
  (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span>{{hero.name}}
  </li>
</ul>



<app-hero-details [selectedHero]="selectedHero"> </app-hero-details>
<!-- <div *ngIf="selectedHero">
 
  <h2>{{ selectedHero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>
 
</div> -->